$(function () {
    ajaxDefrence();

    $.when(myajax).done(function () {
        slideJquery();
    })
});

function slideJquery() {            //轮播方法
    let banner = $(".banner");   //获取图片盒子
    let imgBox = $(".bannerImg"); //获取图片容器 （ul）
    // // let firstImg = imgBox.children("li:first-of-type"); //获取图片ul下的第一张图片
    // // let lastImg = imgBox.children("li:last-of-type");  //获取图片ul下的最后一张图片
    // // imgBox.append(firstImg.clone(true));   //克隆第一张图片（true：表示包括事件一起克隆）插入到图片ul的最后一张
    // // imgBox.prepend(lastImg.clone(true));  //克隆最后一张图片（true：表示包括事件一起克隆）插入到图片ul的第一张
    let lis=imgBox.children("li"); //获取图片ul下的所有li元素
    let count=lis.length;     //获取li的长度
    let bannerWidth=banner.width(); //获取可视图的宽度（当前指定给图片盒子的宽度范围）；
    imgBox.width(bannerWidth*count); //设置图片容器的宽度等于可视图宽度✖li元素的数量（图片多少张就多大宽度）
    lis.width(bannerWidth);//设置每一张图片（每一个li元素）的宽度等于可视图的宽度
    let index=1;     //定义图片索引（表示第几张）
    $(".bannerPoint").children(":first-child").addClass("active").siblings().removeClass();

    imgBox.css("left",-bannerWidth); //设置图片盒子偏移的宽度（移动多少像素，表示向左移动几张图片）
    window.onresize = function () {  //随着屏幕大小变化，自动适配
        bannerWidth = banner.width();  //重新获取可视图的宽度
        imgBox.width(count * bannerWidth); //重新设置图片容器的宽度
        for (let i = 0; i < lis.length; i++) { //遍历所有图片
            lis.eq(i).width(bannerWidth);//设置每一张图片的宽度等于可视图宽度
        }
        imgBox.css("left", -index * bannerWidth);//设置图片偏移的宽度
    };
    let timerId;   //定义定时器变量
    let strTimer=function () { //添加定时器调用方法
        timerId=setInterval(function () { //添加定时器方法
            index++;      //切换到上一张图片
            imgBox.css("transition","left 0.5s ease-in-out"); //给图片添加css过渡效果
            // imgBox.css("transition-duration",);
            imgBox.css("left", -index * bannerWidth);//设置图片偏移的宽度
            setTimeout(function () { //添加定时器方法（表示只执行一次）
                if(index===count-1){  //如果到了最后一张（因为克隆了才count-1）
                    index=1;      //设置图片索引=1（表示回到第一张）
                    imgBox.css("transition","none");//清除过渡效果
                    imgBox.css("left", -index * bannerWidth);//设置图片偏移的宽度
                }
            },500) //设置时间
        },1500)//设置时间
    };
    strTimer();//开启定时器
    let startX,moveX,distanceX;//定义三个变量表示 开始位置，移动位置，位置像素的差异
    let isEnd=true; //定义控制触摸的变量
    imgBox.on("touchstart",function (e) { //给图片容器添加触摸开始事件
        clearInterval(timerId); //触摸开始先清除定时器
        startX=e.targetTouches[0].clientX;//获取触点坐标
    });
    imgBox.on("touchmove",function (e) { //给图片添加触摸移动事件
        if(isEnd===true){   //如果正在触摸才进入以下程序
            moveX=e.targetTouches[0].clientX; //获取移动坐标
            distanceX=moveX-startX; //计算差异=移动位置-触摸开始位置
            imgBox.css("transition","none");//清除过渡效果
            imgBox.css("left", (-index * bannerWidth)+distanceX);//设置之前图片偏移的位置
        }
    });
    imgBox.on("touchend",function () { //添加触摸结束事件
            isEnd=false;  //触摸结束停掉触摸事件
            if(Math.abs(distanceX)>50){//如果移动位置大于五十像素
                if(distanceX>0){ //如果差异大于0
                    index--;//切换到上一张
                }else{
                    index++; //否之下一张
                }
                imgBox.css("transition","left 0.5s ease-in-out");//添加过渡效果
                imgBox.css("left", -index * bannerWidth);//设置图片偏移的宽度
            }else if(Math.abs(distanceX)>0){  //如果小于50且大于0就开启回弹效果
                imgBox.css("transition","left 0.5s ease-in-out");//添加过渡效果
                imgBox.css("left", -index * bannerWidth);//设置图片偏移的宽度
            }
            startX=0;    //重置所有数据
            moveX=0;
            distanceX=0;
        });
    imgBox.on("webkitTransitionEnd",function () { //添加过渡效果监视事件，过渡完成了才会开启
        if(index===count-1){     //如果图片到了最后一张
            index=1;   //瞬间回到第一张
            imgBox.css("transition","none"); //清除过渡效果
            imgBox.css("left", -index * bannerWidth);//设置图片偏移的宽度
        }else if(index===0){//如果图片到了第一张（这张图片是克隆的所以下标为0）
            index=count-2;  //瞬间回到最后一张
            imgBox.css("transition","none");//清除过渡效果
            imgBox.css("left", -index * bannerWidth);//设置图片偏移的宽度
        }
        dot(index);  //调用圆点排序方法
        setTimeout(function () { //添加定时器
            isEnd=true;     //开启触摸事件
            clearInterval(timerId);//清除定时器
            strTimer(); //调用定时方法
        },100);//设置完成此定时器时间
    });
    let dot=function (index) {  //圆点方法
        let lis=banner.children("ul:last-of-type").children("li");//获取圆点ul下的所有li
        for(let i=0;i<lis.length;i++){ //遍历所有li
            lis.removeClass("active");//移除active样式（需要添加CSS）
        }
        lis.eq(index-1).addClass("active");//添加active样式图片是第几张，圆点就到第几个；
    }
}
//ajax包装刷新方法
function ajaxDefrence(){
    myajax=$.ajax({
        url: 'http://192.168.1.118/qa/banner/list',
        type: "POST",
        dataType: 'json',

    success: function (data) {
            for(let i=0;i<data.info.list.length;i++) {
                $("<li><a><img src="+data.info.list[i].bannerPicture+"></img></a></li>").appendTo( $(".bannerImg"));
                $("<li></li>").appendTo($(".bannerPoint"));

            }
            let banner = $(".banner");   //获取图片盒子
            let imgBox = $(".bannerImg"); //获取图片容器 （ul）
            let firstImg = imgBox.children("li:first-of-type"); //获取图片ul下的第一张图片
            let lastImg = imgBox.children("li:last-of-type");  //获取图片ul下的最后一张图片
            imgBox.append(firstImg.clone(true));   //克隆第一张图片（true：表示包括事件一起克隆）插入到图片ul的最后一张
            imgBox.prepend(lastImg.clone(true));  //克隆最后一张图片（true：表示包括事件一起克隆）插入到图片ul的第一张
            let lis=imgBox.children("li"); //获取图片ul下的所有li元素
            let count=lis.length;     //获取li的长度
            let bannerWidth=banner.width(); //获取可视图的宽度（当前指定给图片盒子的宽度范围）；
            imgBox.width(bannerWidth*count); //设置图片容器的宽度等于可视图宽度✖li元素的数量（图片多少张就多大宽度）
            // imgBox.bannerPicture=bannerWidth;
            lis.width(bannerWidth);
            },

    });
}
